import React,{ Component, Fragment } from 'react';
import {Link} from "react-router-dom"
import { Layout, Menu } from 'antd';
import styles from './styles.module.less';
import { connect } from 'react-redux';


import './style.css'

//在此特殊化处理
import {HomeOutlined, BarChartOutlined, UsergroupDeleteOutlined,
  SettingOutlined} from '@ant-design/icons';
//在此特殊化处理
const {Sider} = Layout;
const { SubMenu } = Menu;

function userMenu(role) {
  if(role == 1){
    return(
      <Fragment>
        <Menu.Item key='admin/home' icon={<HomeOutlined />}><Link to="/admin/home">首页</Link></Menu.Item>
        <SubMenu key = 'sub1' title='专业设置' icon={<SettingOutlined />}>
          <Menu.Item key='1'><Link to='/admin/graduation'>毕业要求</Link></Menu.Item>
          <Menu.Item key='2'><Link to="/admin/mitrix-manager">矩阵管理</Link></Menu.Item>
          <Menu.Item key='3' icon={<UsergroupDeleteOutlined />}><Link to='/admin/management-student'>学生管理</Link></Menu.Item>
          <Menu.Item key='4' icon={<UsergroupDeleteOutlined />}><Link to='/admin/teaching-program'>教学计划</Link></Menu.Item>
        </SubMenu>
        <SubMenu key = 'sub2' title='数据统计' icon={<BarChartOutlined />}>
          <Menu.Item key='5'><Link to="/admin/schedule">统计进度</Link></Menu.Item>
          <Menu.Item key='6'><Link to="/admin/studentAnalysis">学生数据</Link></Menu.Item>
          <Menu.Item key='7'><Link to="/admin/yearAnalysis">年级数据</Link></Menu.Item>
        </SubMenu>
      </Fragment>
    )
  }else if(role == 0){
    return(
      <Fragment>
        <Menu.Item key='user/home' icon={<HomeOutlined />}><Link to="/user/home">首页</Link></Menu.Item>
        <Menu.Item key='user/goal' icon={<HomeOutlined />}><Link to="/user/courseGoal">课程目标</Link></Menu.Item>
        <Menu.Item key='user/analysis' icon={<HomeOutlined />}><Link to="/user/scoreCalculate">能力结算</Link></Menu.Item>
      </Fragment>
    )
  }
  return null
  
}

class SiderWidget extends Component {

  // menuChange = e => {
  //   const { history, location} = this.props;
  //   location.pathname = e.key;
  //   history.push(location);
  // }

  render(){
    const {collapsed} = this.props;
    return(
      <Sider trigger={null} collapsible collapsed={collapsed} style={{backgroundColor: '#2D3D51'}}>
        <div className={styles.logo} />
        <Menu
          mode="inline"
          style={{background:"rgb(45, 61, 81)"}}
          // onClick = {this.menuChange}
          theme="dark">
          {/* {userMenu(this.props.store.role-1)} */}
          {userMenu(localStorage.getItem("role"))}
        </Menu>
      </Sider>
    )
  }
}
const mapStateToProps = state => ({ store: state.user })
export default connect(mapStateToProps)(SiderWidget);